<template>
  <div>
    <div>
      <div class="top">
        <div class="top1"><span>ele.me</span> <van-icon name="contact" /></div>
        <div class="location">
          <p class="dangqian">
            当前定位城市: <span>定位不准时，请在城市列表中选择</span>
          </p>
          <p class="gzho1">
            <span
              @click="
                $router.push({ path: `/citysearch`, query: { id: dingwei.id } })
              "
              class="gzhowenzi"
              >{{ dingwei.name }}</span
            >
            <van-icon class="dakhao" name="arrow" />
          </p>
        </div>
        <div class="zhuangshi"></div>
        <div class="location">
          <p class="dangqian">热门城市</p>
          <p class="gzho">
            <span
              ref="back"
              :style="active"
              class="remen"
              v-for="item in hot"
              :key="item.id"
              @click="
                $router.push({ path: `/citysearch`, query: { id: item.id } })
              "
              >{{ item.name }}</span
            >
          </p>
        </div>
        <div class="zhuangshi"></div>
        <!-- 所有的城市 -->
        <div class="city">
          <div class="citytop" v-for="(item, index) in group1" :key="index">
            <div class="paixu">
              <span class="citytopA">{{ index }}</span
              ><span class="citytopzimu">(按字母排序)</span>
            </div>
            <div class="xunh">
              <span
                class="xunh1"
                v-for="i in item"
                :key="i.id"
                @click="
                  $router.push({ path: `/citysearch`, query: { id: i.id } })
                "
                >{{ i.name }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="pig">
        <div class="load_img"></div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { cities, citier, citiers } from "../api/citylist";
export default {
  data() {
    return {
      active: "",
      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      //定位城市
      guess: "guess",
      dingwei: "",
      remen: "",
      hot: "",

      group1: "",
      show: false,
    };
  },
  created() {
    this.show = true;
    citiers("group").then((res) => {
      let arys = res.data;
      function objKeySort(arys) {
        //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
        var newkey = Object.keys(arys).sort();
        //console.log('newkey='+newkey);
        var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
        for (var i = 0; i < newkey.length; i++) {
          //遍历newkey数组
          newObj[newkey[i]] = arys[newkey[i]];
          //向新创建的对象中按照排好的顺序依次增加键值对
        }
        return newObj; //返回排好序的新对象
        console.log(89, newObj);
      }
      objKeySort(arys);
      this.group1 = objKeySort(arys);
      console.log(this.group1);
    });
    cities("guess").then((res) => {
      console.log(res);
      this.dingwei = res.data;
    });
    citier("hot").then((res) => {
      console.log(res);
      this.hot = res.data;
      console.log(this.hot);
      this.show = false;
    });
  },

  methods: {
    btn1() {
      let arr = document.querySelectorAll(".remen");
      arr[1].style.backgroundColor = "red";
      console.log();
    },
  },
};
</script>

<style lang="less" scoped>
.van-dialog {
  z-index: 2002;
  height: 300px;
  background-color: transparent;
}
.pig {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  .load_img {
    width: 100%;
    height: 100%;
    background: url("..//assets/6.png") no-repeat 0 0;
    transform: translateY(0);
    position: relative;
    animation: move 0.6s infinite;
    z-index: 11;
    left: 0;
  }
}

@keyframes move {
  to {
    transform: translate(0, -100%);
  }
}
.gzho1 {
  height: 50px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid #eeeeee;
  .gzhowenzi {
    color: #31aaf2;
  }
  .dakhao {
    color: #999999;
  }
}
.zhuangshi {
  height: 20px;
  background-color: #f5f5f5;
}
.paixu {
  line-height: 25px;
  height: 25px;
}
.van-icon {
  font-size: 30px;
}
.guangzho {
  padding-left: 10px;
}
.xunh1 {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 24.4%;
  height: 30px;
  font-size: 12px;
  border: 1px solid #eeeeee;
}
.citytop {
  .citytopA {
    margin-left: 10px;
  }
  .citytopzimu {
    font-size: 12px;
    color: #999999;
    margin-left: 10px;
  }
}
.toppppp {
  background-color: #f5f5f5;
}
.gzho {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
  .remen {
    line-height: 30px;
    border: 1px solid #eeeeee;
    width: 24.4%;
    height: 30px;
    color: #319eee;
  }
  display: flex;
  align-items: center;
  border: 1px solid #eeeeee;

  .gzhowenzi {
    margin: 10px 0;
    color: #319eee;
    font-size: 20px;
  }
}
.top {
}
// 定位城市样式
.location {
  .dangqian {
    margin: 30px 10px 10px 10px;
    position: relative;
    span {
      position: absolute;
      right: 0px;
      color: #9f9f9f;
    }
  }
}
.top1 {
  font-size: 20px;
  padding: 0 15px;
  color: #ffffff;
  align-items: center;
  height: 50px;
  background-color: #3190e8;
  display: flex;
  justify-content: space-between;
}
</style>
